<template>
	<cl-dialog
		:title="`${form.user_name}-绑定加微号`"
		width="500px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" :model="form" :rules="rules" label-position="top" :disabled="saving">
			<el-form-item label="加微号-手机号" prop="user_phone">
				<cl-select
					v-model="form.user_phone"
					style="width: 100%"
					placeholder="请选择手机号"
					filterable
					clearable
				>
					<el-option
						v-for="(item, index) in mobileList"
						:key="index"
						:label="item.content"
						:value="item.content"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="加微号-微信号" prop="user_wx">
				<cl-select
					v-model="form.user_wx"
					style="width: 100%"
					placeholder="请选择微信号"
					filterable
					clearable
				>
					<el-option
						v-for="(item, index) in wechatList"
						:key="index"
						:label="item.content"
						:value="item.content"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="加微号-QQ号" prop="user_qq">
				<cl-select
					v-model="form.user_qq"
					style="width: 100%"
					placeholder="请选择QQ号"
					filterable
					clearable
				>
					<el-option
						v-for="(item, index) in qqList"
						:key="index"
						:label="item.content"
						:value="item.content"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="加微码-二维码" prop="user_qrcode">
				<cl-select
					v-model="form.user_qrcode"
					style="width: 100%"
					placeholder="请选择二维码"
					filterable
					clearable
				>
					<el-option
						v-for="(item, index) in qrcodeList"
						:key="index"
						:label="item.content"
						:value="item.content"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item prop="user_wxk_code">
				<template #label>
					<div>
						<span class="mr-1">企微码-企业微信码</span>
						<el-button type="text" @click="jumpToJiaWei()">跳转至加微号配置</el-button>
					</div>
				</template>
				<cl-select
					v-model="form.user_wxk_code"
					style="width: 100%"
					placeholder="请选择企业微信码"
					filterable
					clearable
					disabled
					multiple
				>
					<el-option
						v-for="(item, index) in wxkcodeList"
						:key="index"
						:label="item.content"
						:value="item.content"
					/>
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" @click="submit" :loading="saving" :disabled="!submitEnable"
				>确定</el-button
			>
		</template>
	</cl-dialog>
</template>

<script>
export default {
	name: "add-wechat",
	data() {
		return {
			visible: false,
			form: {
				user_id: "",
				user_name: "",
				user_phone: "", // 手机号
				user_wx: "", // 微信号
				user_qq: "", //QQ号
				user_qrcode: "", //二维码
				user_wxk_code: []
			},
			rules: {
				// user_phone: [{ required: true, message: "请选择手机号" }],
				// user_wx: [{ required: true, message: "请选择微信号" }],
				// user_qq: [{ required: true, message: "请选择QQ号" }],
				// user_qrcode: [{ required: true, message: "请选择二维码" }]
			},
			saving: false,
			mobileList: [], //手机号
			wechatList: [], //微信
			qqList: [], //QQ
			qrcodeList: [], //二维码
			wxkcodeList: []
		};
	},
	computed: {
		submitEnable() {
			const { user_phone, user_wx, user_qq, user_qrcode, user_wxk_code } = this.form;
			return user_phone || user_wx || user_qq || user_qrcode || user_wxk_code;
		}
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			Object.keys(this.form).forEach(key => {
				this.form[key] = data[key];
			});
			this.getWxNumLists(data.biz_id);
		},
		beforeClose(done) {
			if (this.saving) return;
			done();
		},
		close() {
			if (this.saving) return;
			this.visible = false;
			this.reset();
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				try {
					this.saving = true;
					await this.$service.user.addWechat(this.form);
					this.$message.success("操作成功");
					this.$emit("confirm");
					this.saving = false;
					this.close();
				} catch (error) {
					this.saving = false;
				}
			});
		},
		jumpToJiaWei() {
			this.close()
			this.$router.push('/home/set/promotion/addWechat?addType=5')
		},
		async getWxNumLists(biz_id) {
			this.mobileList = [];
			this.wechatList = [];
			this.qqList = [];
			this.qrcodeList = [];
			if (!biz_id) return;
			const data = await this.$service.config.wechatNumLists({ biz_id });
			this.mobileList = data.mobile;
			this.wechatList = data.wechat;
			this.qqList = data.qq;
			this.qrcodeList = data.qrcode;
			this.wxkcodeList = data.wxk_code;
		}
	}
};
</script>
